<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-card>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-row>
                <el-col :span="6">
                  <el-date-picker v-model="dateRange" size="small" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-col>
                <el-col :span="5">
                  <el-input prefix-icon="el-icon-search" v-model="queryParams.userName" placeholder="搜索用户名" clearable
                    size="small" />
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row style="text-align: right">
                <el-button type="primary" plain size="mini" @click="handleQuery">查询</el-button>
                <el-button size="mini" @click="resetQuery">清空</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>{{ title }}列表</span>
            <div style="float: right; padding: 3px 0">
              <el-button v-show="showListIndex != 0" type="primary" size="mini" @click="showUserList">入园次数统计</el-button>
              <el-button v-show="showListIndex != 1" type="primary" size="mini" @click="showVoteList">购票信息统计</el-button>
              <el-button size="mini" icon="el-icon-refresh-right" @click="getList">刷新</el-button>
            </div>
          </div>
          <table0 v-if="showListIndex == 0" :loading="loading" :userList="userList" />
          <table1 v-if="showListIndex == 1" :loading="loading" :userList="userList" />

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  userManageListApi, // 用户列表分页
} from "@/api/YApi/userManage";
import table0 from "./comp/table0.vue";
import table1 from "./comp/table1.vue";

export default {
  name: "User",
  components: {
    table0,
    table1
  },
  data() {
    return {
      showListIndex: 0,
      title: "用户",
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 日期范围
      dateRange: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
      },
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        userName: this.queryParams.userName,
        startTime: this.dateRange ? this.dateRange[0] : null,
        endTime: this.dateRange ? this.dateRange[1] : null,
      }
      this.userList = [];
      this.total = 0;
      this.loading = true;
      userManageListApi(params, this.showListIndex).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: null
      }
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 显示用户列表
    showUserList() {
      this.showListIndex = 0;
      this.title = "用户";
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: null
      }
      this.getList();
    },
    // 显示购票信息统计
    showVoteList() {
      this.showListIndex = 1;
      this.title = "购票信息统计";
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: null
      }
      this.getList();
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-link {
  text-decoration: underline;
}
</style>
